<template>
	<view class="wrapper order">
		<view class="order-box" v-if="express?.nu">
			<view class="express-item main-flex">
				<image class="express-item-icon" mode="heightFix" src="/static/images/icon/send.png"></image>
				<text class="express-item-status"></text>
			</view>
			<view class="express-item main-flex">
				<text class="express-item-name">物流公司：</text>
				<text class="express-item-text">{{express.companyName}}</text>
			</view>
			<view class="express-item main-flex">
				<text class="express-item-name">运单号：</text>
				<text class="express-item-text">{{express.nu}}</text>
				<image class="express-item-copy" @click="copyText(express.nu)" src="/static/images/icon/copy.png"></image>
			</view>
		</view>
		<view
			v-if="isNull"
			class="null main-flex">
			<u-empty text="~ 没有物流信息哟 ~" icon="/static/images/null.png"></u-empty>
		</view>
		<view class="order-box" v-if="express?.data">
			<uni-steps
				:options="expressList"
				deactiveColor="#666666"
				direction="column" :active="-1"></uni-steps>
		</view>
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { throttle, debounce } from '@/uni_modules/uview-plus'
import modal from '@/plugins/modal'
import { orderExpress } from "@/api/app_api/order"

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const id = ref('')
	onLoad((option) => {
		id.value = option.id
		if (id.value) {
			orderExpressDetail()
		}
	})
	
	// 获取物流信息
	const express = ref({})
	const isNull = ref(false)
	const orderExpressDetail = () => {
		uni.showLoading({
			title: '数据查询中...'
		})
		orderExpress({
			id: id.value
		}).then(res => {
			express.value = res?.data || {}
			isNull.value = res?.data ? false : true
			uni.hideLoading()
		}).catch(err => {
			isNull.value = false
			uni.hideLoading()
		})
	}
	
	const expressList = computed(() => {
		return express.value?.data.map(item => {
			return {
				...item,
				title: item.context,
				desc: item.time
			}
		}) || []
	})
	
</script>

<style lang="scss">
	.order {
		padding: 20rpx;
		&-box {
			border-radius: 20rpx;
			background-color: #ffffff;
			padding: 20rpx;
			&+.order-box {
				margin-top: 20rpx;
			}
		}
		.express-item {
			font-size: 28rpx;
			&+.express-item {
				margin-top: 10rpx;
			}
			&-icon {
				height: 28rpx;
				margin-right: 20rpx;
			}
			&-text {
				margin-right: 20rpx;
			}
			&-right {
				margin-left: auto;
			}
			&-context {
				font-size: 24rpx;
				color: $text-light;
			}
			&-time {
				font-size: 24rpx;
				color: $text-light;
				text-align: right;
			}
			&-copy {
				width: 32rpx;
				height: 32rpx;
			}
			&-status {
				margin-left: 20rpx;
			}
		}
	}
</style>
